<template>
	<div class="match-info">
		<el-tabs type="border-card" :value="activeTab">
			<el-tab-pane v-for="(tab, tabindex) in tabs" :key="tab" :label="tab" :name="tab">
				<el-collapse accordion :value="0">
					<el-collapse-item v-for="(match, index) in filteredByWeek(tabindex + 1)" :key="match.id" :name="index">
						<template slot="title">
							<div style="left: 40%; width: 200px; position: relative;">
								<div class="team winner" style="float: left;">
									<img :src="match.winner.insignia" />
								</div>
								<div class="match-score" style="position: absolute; left: 30%;">
									<p class="score winner-score">{{ match.winnerScore }}</p>
									<p class="score loser-score">{{ match.loserScore }}</p>
								</div>
								<div class="team loser" style="float: right;">
									<img :src="match.loser.insignia" />
								</div>
								<div style="clear:both;"></div>
							</div>
						</template>
						<div class="match-info-content">
							<Match :match-id="match.id"></Match>
						</div>
					</el-collapse-item>
				</el-collapse>
			</el-tab-pane>
		</el-tabs>
		
	</div>
</template>

<script>
	import Match from './Match.vue'
	import Http from '../../utils/http.js'
	import Api from '../../utils/api.js'

	export default {
		name: 'match-info',
		data () {
			var tabs = ['1st Week', '2nd Week', '3rd Week', '4th Week', '5th Week', '6th Week', '7th Week', '8th Week'];
			var activeTab = tabs[0];
			if (this.$route.params.week) {
				activeTab = tabs[this.$route.params.week - 1];
			}
			return {
				matches: [],
				activeTab: activeTab,
				tabs: tabs
			};
		},
		components: {
			Match
		},
		created: function () {
			this.fetchData(this.$route.params.seasonId | 0);
		},
		methods: {
			fetchData: function (seasonId) {
				Http.get(Api.seasons, {seasonId: seasonId}).then(
					(response) => {
						this.matches = response.data['season' + seasonId] || [];
					}
				)
			},
			filteredByWeek: function (week) {
				return this.matches.filter(function(item) {
					if (item.week === week) {
						return item;
					}
				});
			}
		},
		watch: {
			// watch route status, see if changed. include $route.path & $route.params etc.
			$route () {
				this.fetchData(this.$route.params.seasonId | 0);
			}
		}
	}
</script>

<style>
	.match-info .match-info-content {
		margin: 2rem 0;
	}
	.team img {
		width: 35px;
		height: 35px;
		vertical-align: middle;
	}
	.score {
		float: left;
		font-size: 30px;
		font-weight: 600;
		font-style: italic;
		margin: 0 10px;
	}
</style>